<template>
	<div class="books">
		<el-row justify="space-between">
			<el-col :span="4">
				<span>类型</span>
			</el-col>
			<el-col :span="3">
				<span><el-button type="primary" @click="getUrl()"><el-icon><circle-plus /></el-icon>添加</el-button></span>
			</el-col>
		</el-row>
		<div class="border-bottom"></div>
		<el-table :data="list" border style="width: 100% " height="710">
		   <el-table-column prop="name" label="名称" width="130" fixed show-overflow-tooltip />
		   <el-table-column prop="sn" label="编号" width="80" show-overflow-tooltip  />
		   <el-table-column prop="author" label="作者" width="120" />
		   <el-table-column prop="publisher" label="出处" show-overflow-tooltip />
		   <el-table-column  label="日期" width="120">
			   <template #default="scope">
				   {{filterTime(scope.row.tpublish)}}
			   	</template>
			   </el-table-column>
		   <el-table-column  label="图片" width="120">
			   <template #default="scope">
				   <img :src="`${$Imgurl}/api/public/showImg/${scope.row.picture}`" />
			   </template>
		   </el-table-column>
		   <el-table-column label="操作"  width="110" fixed='right'>
				 <template #default="scope">
					 <el-button type="primary" 
					 @click="update(scope.row.id)"
					 class="el-button--small"
					 >
					 <el-icon><edit /></el-icon>修改
					 </el-button>
				</template>
			</el-table-column>
		 </el-table>
		 <el-pagination background
		 layout="prev ,pager,next"
		 :total="sumpages"
		 :page-size="num"
		 :hide-on-single-page="true"
		 v-model:currentPage="pages"
		 ></el-pagination>
	</div>
</template>

<script>
	import {CirclePlus,Edit} from '@element-plus/icons-vue'
	export default{
		name:'Books',
		data(){
			return{
				list:[],
				pages:1,//页数
				num:5,//每页条数，
				sumpages:0,//总页数
			}
		},
		watch:{
			pages(){
				this.select()
			}
		},
		methods:{
			// 修改
			update(id){
				this.$router.push({path:'bookedit',query:{bookid:id}})
			},
			//分页
			getbut(num){
				this.pages=num
				this.select()
			},
			//获取类型数据
			select(){
				this.axios.get('/api/adm/book/findByPage/'+this.pages+'/5').then((res)=>{
					this.list=res.data.data.books
					//总页数
					this.sumpages=res.data.data.total
				}).catch((error)=>{
					console.log(error);
				})
			},
			getUrl(){
				this.$router.push({path:'bookedit',query:{bookid:0}})
			},
			TumTime(t){
				return t>9?t:'0'+t
			}
		},
		created() {
			this.select()
		},
		computed:{
			filterTime(){
				return (t)=>{
					let times = new Date(t)
					 let year = times.getFullYear();
					 let month = times.getMonth()+1;
					 let day = times.getDate()
					return `${year}-${this.TumTime(month)}-${this.TumTime(day)}`
				}
			}
		},
		components:{
			CirclePlus,
			Edit
		}
	}
</script>

<style scoped>
	.books{
		overflow: auto;
		width: 100%;
		height: 100%;
		background-color: white;
	}
	.border-bottom{
		margin: 5px 0;
		border-bottom: 2px solid #7f7f7f;
	}
	.cell img{
		width: 100px;
		height: 100px;
	}
	:deep(.el-table__cell){
		font-weight: normal;
		font-size: 13px;
	}
</style>
